CSS übertrumpft HTML

Das leidige Thema Hintergrundbildausrichtung. Da HTML dort komplett zum vergessen ist, muss CSS ran - und geht auch ran. Mit relativ einfachen Parametern kann man sein Hintergrundbild so richtig nett in Szene setzen.
CSS-Codes schreiben wir wie üblich hintereinander im Knuddels-Homepageeditor weg, ohne Entertaste oder Absatz!
Und nochmals aufpassen: Wer per CSS sein Hintergrundbild ausrichten will, der sollte natürlich so clever sein, die alten HTML Einträge für den Hintergrund bzw. den URL aus dem Bereich des Hintergrundbildes im Knuddels-Homepageeditor zu entfernen.


Erklärung durch Beispiele...

<style type="text/css"><!--body{background-image:url(http://www..../bild.jpg); background-position: center; background-repeat: no-repeat; background-attachment:fixed;}--></style>

Parameter "background-image":
Nun, es ist sicher verständlich, dass sich unser CSS-Code von irgendwoher ein Bild laden muss. Dies geht mit dem Wert "url(http://www..../bild.jpg)"
url gefolgt von der in Klammern stehenden Web-Adresse des Bildes

Parameter "background-attachment":
Kennen wir doch irgendwoher? Genau... aus Quickies (festes Hintergrundbild).
Hier sehen wir diesen Trick mit CSS aufgerufen. (Normalerweise stellt man diesen Parameter immer auf "fixed" ein, damit der Text bei sämtlichen Ausrichtungsmöglichkeiten über das Hintergrundbild schwebt. Wer den "mitscrollenden Hintergrund" trotzdem verwenden möchte, lässt den Paramter "background-attachment" einfach komplett aus der CSS-Definition raus.)

Parameter "background-repeat":
no-repeat; (nicht wiederholen - genau das, was HTML nicht kann!)
repeat; (auf X- und Y-Achse wiederholen)
repeat-y; (nur auf Y-Achse wiederholen)
repeat-x; (nur auf X-Achse wiederholen)

Parameter "background-position":
Damit kann man jetzt endlich ein großes Bild allein stehend links wie rechts, oben, unten sowie zentriert oder sogar kombiniert einbauen. (natürlich muss dann für den Repeatparameter "no-repeat" eingestellt sein!)

center; = zentriert und mittig
center top; = zentriert oben
left top; = links oben
right bottom; = rechts unten
usw., usw., usw., ...
(Die Reihenfolge bei 2 Werten für diesen Parameter ist jedem selbst überlassen)